<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j">
    <body>
         <ui:composition template="/common/templates/common.xhtml">
            <ui:param name="titulo" value="Pagar" />
            <ui:define name="body">
                <rich:messages passedLabel="Data is allowed to be stored." layout="list">
                    <f:facet name="header">
                        <h:outputText value="Entered Data Status:"></h:outputText>
                    </f:facet>
                    <f:facet name="infoMarker">
                        <h:graphicImage  value="/img/passed_.gif" />
                    </f:facet>
                    <f:facet name="errorMarker">
                        <h:graphicImage value="/img/error_.gif" />
                    </f:facet>
                </rich:messages>
                <a4j:form id="form" ajaxSubmit="true">
                     <a4j:region>
                        
                        <a4j:keepAlive beanName="PagarBackingBean"/>

                        <h:panelGrid columns="2" id="panel_principal">
                            <h:outputLabel value="Referencia:" id="l_referencia"  styleClass="texto_azul_bold"/>
                            <h:outputText value="#{PagarBackingBean.venta.referencia}" id="t_referencia"/>
                            <h:outputLabel value="Valor Total:" id="l_valor"  styleClass="texto_azul_bold"/>
                            <h:outputText value="#{PagarBackingBean.venta.valorTotal}" id="t_valor">
                                <f:convertNumber currencyCode="COP" currencySymbol="$" maxFractionDigits="0" type="currency">
                                </f:convertNumber>
                            </h:outputText>
                            <h:outputLabel value="Descripción:" id="l_descripcion"  styleClass="texto_azul_bold"/>
                            <h:outputText value="#{PagarBackingBean.descripcionVenta}" id="t_descripcion"/>
                            
                            <h:outputLabel value="Formas de pago:" id="l_forma" styleClass="texto_azul_bold" />
                            <h:selectOneMenu value="#{PagarBackingBean.idFormaPago}" id="s_forma">
                                <f:selectItems value="#{PagarBackingBean.formasPago}"/>
                                <a4j:support event="onchange" action="#{PagarBackingBean.cambioFormaPago}" reRender="texto"
                                ajaxSingle="true"/>
                            </h:selectOneMenu>
                        </h:panelGrid>
                        <a4j:outputPanel ajaxRendered="true">
                            <h:panelGrid columns="2" id="panel_bancario" rendered="#{PagarBackingBean.combo1}"
                                >
                                <h:outputLabel value="Entidades Bancarias:" id="l_banco"  styleClass="texto_azul_bold"/>
                                <h:selectOneMenu value="#{PagarBackingBean.idEntidadBancaria}" id="s_banco">
                                    <f:selectItems value="#{PagarBackingBean.entidadesBancaria}"/>
                                </h:selectOneMenu>
                            </h:panelGrid>
                            <h:panelGrid columns="2" id="panel_tarjetas" rendered="#{PagarBackingBean.combo2}"
                                >
                                <h:outputLabel value="Tarjetas:" id="l_tarjeta"  styleClass="texto_azul_bold"/>
                                <h:selectOneMenu value="#{PagarBackingBean.idEntidadTarjeta}" id="s_tarjeta">
                                    <f:selectItems value="#{PagarBackingBean.entidadesTarjeta}"/>
                                </h:selectOneMenu>
                                <h:outputLabel value="Nombre y apellidos:" id="l_nom_ape"  styleClass="texto_azul_bold"/>
                                <h:inputText id="t_nom_ape" value="#{PagarBackingBean.venta.datosTarjeta.nombresApellidos}"/>
                                <h:outputLabel value="Número de la tarjeta:" id="l_num_tarje"  styleClass="texto_azul_bold"/>
                                <h:inputText id="t_num_tarje" value="#{PagarBackingBean.venta.datosTarjeta.numeroTarjeta}"/>
                                <h:outputLabel value="Código de seguridad:" id="l_cod_seguridad"  styleClass="texto_azul_bold"/>
                                <h:inputText id="t_cod_seguridad" value="#{PagarBackingBean.venta.datosTarjeta.codigoSeguridad}"/>
                                <h:outputLabel value="Fecha de Expiración:" id="l_fecha"  styleClass="texto_azul_bold"/>
                                <rich:calendar id="t_fecha" value="#{PagarBackingBean.venta.datosTarjeta.fechaExpiracion}"
                                    locale="es/CO" popup="true" datePattern="MMM.yyyy" showApplyButton="false">
                                </rich:calendar>
                                <h:outputLabel value="Cuotas:" id="l_cuotas"  styleClass="texto_azul_bold"/>
                                <rich:inputNumberSpinner id="t_cuotas" value="#{PagarBackingBean.venta.datosTarjeta.cuotas}"
                                    minValue="1" maxValue="24" />
                            </h:panelGrid>
                        </a4j:outputPanel>
                        <a4j:commandButton value="Cancelar" id="b_cancelar" action="#{PagarBackingBean.cancelar}"/>
                        <a4j:commandButton value="Terminar Compra" id="b_terminar" oncomplete="javascript:Richfaces.showModalPanel('panelCompraExitosa',{width:200, top:200})" action="#{PagarBackingBean.terminarCompra}"/>
                    </a4j:region>
                </a4j:form>

                <a4j:outputPanel ajaxRendered="true">
                    <rich:modalPanel id="panelCompraExitosa" autosized="true" rendered="#{PagarBackingBean.comprado}" width="150" style="align: center;">
                        <f:facet name="header">
                            <h:outputText value="CONFIRMACIÓN PAGO" />
                        </f:facet>
                        <h:form id="form_1">
                            <a4j:keepAlive beanName="PagarBackingBean"/>
                            <h:panelGrid columns="1" styleClass="centro" style="align: center;">
                                <h:outputText value="SU COMPRA HA SIDO EXITOSA!"  styleClass="texto_azul_bold" style="align: center;"/>
                                <a4j:commandButton value="Cerrar" action="#{PagarBackingBean.cerrar}" style="align: center;"/>
                            </h:panelGrid>
                        </h:form>
                    </rich:modalPanel>
                </a4j:outputPanel>
            </ui:define>
        </ui:composition>
    </body>
</html>